<template>
    <div style="width: 100%;">
        <!--仪表盘-->
        <div id="gauge" style="width: 50%; height: 70%;background:pink;"></div>
        <!--柱图-->
        <div id="bar" style="float: right;width: 50%;height: 150%;background: red;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        //  绘制柱状图
        draw_bar() {
            let myEchart = this.$echarts.init(document.getElementById("bar"));
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险'],
                    axisLine: {
                        show: true,
                        onZero: true,
                        symbol: "none",
                        linestyle: {
                            color: "#e5e5e5"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    show: false,
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                //图表与容器的位置关系
                grid: {
                    left: '3%',   // 与容器左侧的距离
                    right: '3%', // 与容器右侧的距离
                    top: '11%',   // 与容器顶部的距离
                    bottom: '12%', // 与容器底部的距离
                },
                series: [
                    {
                        data: [520, 600, 450, 380, 370, 510, 120, 200, 150, 620, 600, 450,],
                        type: 'bar',
                        BACkgroundStyle: {
                            color: "rgba(111, 111, 22, 1)"
                        },
                        //坐标轴显示器的文本标签
                        label: {
                            show: true,
                            position: 'top',
                            color: '#e5e5e5'
                        },
                        //柱条颜色
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'Rgba(0,234,223,0.9)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'Rgba(0,234,223,0.3)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        animationEasing: "linear",
                        animationEasingupdate: "quadraticIn",  //数据更新时的缓动效果
                        animationDurationupdate: 300,  //数据更新动画的时长
                        animation: true  //开启动画
                    }
                ]
            };
            //此处使用定时器seTinterval循环刷新柱状图的值,每次刷新数据均不同
            setInterval(() => {
                for (let i = 0; i <= 11; i++) {  //定义i确保柱图的每一项都能被刷新
                    option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
                }
                myEchart.setOption(option, true)//每刷新一次重新显示图表
            }, 2000)
        },

        //绘制仪表盘
        draw_gauge() {
            let myEchart = this.$echarts.init(document.getElementById("gauge"));
            var option = {
                series: [
                    {
                        name: 'gauge 2',
                        type: 'gauge',
                        min: 0,
                        max: 180,
                        z: 10,
                        startAngle: 210,
                        endAngle: -30,
                        splitnumber: 9,
                        radius: '50%',
                        center: ['50%', '50%'],
                        axisLine: {
                            show: false,
                            linestyle: {
                                width: 2,
                                color: [
                                    [0.825, '#fff'],
                                ]
                            }
                        },
                        splitLine: {
                            distance: 35,
                            length: 22,
                            linestyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            distance: 3,
                            fontSize: 12,
                            fontWeight: 400,
                            fontFamily: 'Arial',
                            color: '#fff'
                        },
                        anchor: {},
                        pointer: {
                            width: 6,
                            offsetCenter: [0, '-10%'],
                            length: '75%',
                            itemStyle: {
                                color: '#fff'
                            }
                        },
                        data: [
                            {
                                value: 130
                                // name: '1/min x 1000'
                            }
                        ],
                        detail: {
                            show: false
                        },
                        animationEasing: "linear",
                        animationEasingupdate: "quadraticIn",  //数据更新时的缓动效果
                        animationDurationupdate: 1000,  //数据更新动画的时长
                        animation: true  //开启动画
                    },
                    {
                        name: 'gauge 3',
                        type: 'gauge',
                        min: 0,
                        max: 8,
                        z: 10,
                        splitnumber: 8,
                        radius: '50%',
                        axisLine: {
                            linestyle: {
                                width: 12,
                                color: [[1, '#34FFCA']]
                            }
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {},
                        pointer: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show: false,
                            offsetCenter: ['0', '70%'],
                            color: '#FFF',
                            fontSize: 18,
                            formatter: '{@R_673_6084@.00'
                        },
                        // value is speed
                        data: [
                            {
                                value: 130,
                            }
                        ],
                        animationEasing: "linear",
                        animationEasingupdate: "quadraticIn",  //数据更新时的缓动效果
                        animationDurationupdate: 1000,  //数据更新动画的时长
                        animation: true  //开启动画
                    },

                ]
            };
            //使用定时器seTinterval循环刷新仪表盘的值
            setInterval(() => {
                // option.series[0].data[0].value = (Math.random() * 150).toFixed(2) - 0; //表盘1
                option.series[0].data[0].value = (Math.random() * 180).toFixed(2) - 0; //表盘2
                // option.series[3].data[0].value = (Math.random() * 8).toFixed(2) - 0; //表盘3
                myEchart.setOption(option, true); //每次刷新后重新显示图表
            }, 500);
        }
    },
    mounted() {
        //调用绘制图表的方法
        this.draw_bar();
        this.draw_gauge();
    },
};
</script>

<style scoped>
#gauge {
    width: 8rem;
    height: 5.5rem;
    position: absolute;
    top: 2.55rem;
    left: 5.7rem;
}

#bar {
    width: 8rem;
    height: 2.2rem;
    position: relative;
    top: 2.8rem;
    left: 5.7rem;
}
</style>
